<template>
    <div class="addCard">
        <div class="addCardForm">
            <el-form :model="form" label-width="120px">
            <el-form-item label="优惠券名称：" >
                <el-input v-model="form.name" placeholder="请输入优惠券名称" style="width: 600px;"/>
                <small class="samllzs">字数上限为9个汉字(建议涵盖卡券属性、服务及金额)。</small>
            </el-form-item>
            <el-form-item label="优惠券类型：">
                <el-radio-group v-model="form.resource">
                    <el-radio label="代金券" />
                    <el-radio label="折扣券" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="抵扣额度：">
                <el-input v-model="form.desc" type="text" placeholder="请输入折扣额度" />
                <small class="samllzs">请输入1-9.9之间的数字，精确到小数点后1位</small>
            </el-form-item>
            <el-form-item label="优惠上限：">
                <el-input v-model="form.desc" type="text" placeholder="请输入折扣额度" />
                <small class="samllzs">最多优惠XX元</small>
            </el-form-item>
            <el-form-item label="使用门槛：">
                <span class="extrozi">
                    满<el-input v-model="form.desc" type="text" style="margin-left: 5px;width:30px"/>
                    元可以使用
                </span>
                <small class="samllzs" style="margin-left: 30px;">消费金额满XX元后使用，无门槛请设为0</small>
            </el-form-item>
            <el-form-item label="有效期限：">
                <el-radio-group v-model="form.resource">
                    <el-radio label="固定时间" />
                    <el-radio label="按领取后计算" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="有效时间：">
                <div class="block">
                <!-- <span class="demonstration"></span> -->
                <el-date-picker
                    v-model="value2"
                    type="daterange"
                    unlink-panels
                    range-separator="~"
                    start-placeholder="请选择"
                    end-placeholder="请选择"
                    :shortcuts="shortcuts"
                    />
                </div>
            </el-form-item>
            <el-form-item label="发放数量：">
            <el-input v-model="form.desc" type="text" />
            </el-form-item>
            <el-form-item label="每人限领：">
            <el-input v-model="form.desc" type="text"  />
            <small class="samllzs">每个用户领券上限,如不填则默认为1</small>
            </el-form-item>
            <el-form-item>
            <el-button>返回</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>Cancel</el-button>
            </el-form-item>
        </el-form>
        </div>
    </div>
</template>

<script setup>
 import { reactive } from 'vue'
 import { ref } from 'vue'
 const value2 = ref('')

 const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const onSubmit = () => {
  console.log('submit!')
}

</script>

<style lang="scss" scoped>
.addCardForm{
    width: 610px;
}
.extrozi{
    border-radius: 8px;
    background-color: #D9D9D9;
}
.addCard {
  width: 100%;
  height: 800px;
  // overflow: hidden;
}
.samllzs{
    color:grey;
}
.block {
  text-align: center;
  border-right: solid 1px var(--el-border-color);
}
</style>